import React from "react";

const Login = () => {
    // 钩子函数初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    // 初始化Form对象
    const [form] = React.$Vant.Form.useForm()

    // 定义状态
    const [mobile,setMobile] = React.useState('13800000000')
    const [password,setPassword] = React.useState('')
    
    // 登录请求
    const onLogin = async () => {
        if(!mobile)
        {
            React.$Vant.Toast.fail('请输入手机号')
            return false
        }

        let Reg = /(^1[3|4|5|7|8][0-9]{9}$)/

        if(!Reg.test(mobile))
        {
            React.$Vant.Toast.fail('手机号格式错误')
            return false
        }

        if(!password)
        {
            React.$Vant.Toast.fail('请输入密码')
            return false
        }

        let data = {
            mobile:mobile,
            password:password
        }

        let result = await React.$Api.login(data)

        if(result.code === 1)
        {
            React.$Vant.Toast({
                type:'success',
                message:result.msg,
                onClose:() => {
                    React.$Cookies.save('LoginAuth',result.data,{path:'/'})
                    navigate('/business/base/index')
                }
            })
        }else{
            React.$Vant.Toast.fail(result.msg)
            return false
        }
    }

    // 更新手机号的值
    const UpdateMobile = (val) => {
        setMobile(val.target.value)
    }

    // 更新密码的值
    const UpdatePassword = (val) => {
        setPassword(val.target.value)
    }

    return (
        <>
            {/* <!--图标样式--> */}
            <link rel="stylesheet" type="text/css" href="/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css" />

            {/* <!--布局框架--> */}
            <link rel="stylesheet" type="text/css" href="/assets/css/util.css" />

            {/* <!--主要样式--> */}
            <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />

            {/* 主体 */}
            <div className="limiter">
                <div className="container-login100" style={{backgroundImage: "url('/assets/images/img-01.jpg')"}}>
                    <div className="wrap-login100 p-t-190 p-b-30">
                        <React.$Vant.Form className="login100-form validate-form" onFinish={onLogin} form={form}>
                            <div className="login100-form-avatar">
                                <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
                            </div>

                            <span className="login100-form-title p-t-20 p-b-45">Hello</span>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
                                <input className="input100" type="text" name="mobile" placeholder="手机号" defaultValue={mobile} onChange={UpdateMobile} autoComplete="off" />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-user"></i>
                                </span>
                            </div>

                            <div className="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                                <input className="input100" type="password" name="password" defaultValue={password} onChange={UpdatePassword} placeholder="密码" />
                                <span className="focus-input100"></span>
                                <span className="symbol-input100">
                                    <i className="fa fa-lock"></i>
                                </span>
                            </div>

                            <div className="container-login100-form-btn p-t-10">
                                <button className="login100-form-btn">登 录</button>
                            </div>

                            <div className="text-center w-full p-t-20">
                                <React.$Router.NavLink to='/business/base/register' className="txt1">
                                    立即注册
                                    <i className="fa fa-long-arrow-right"></i>
                                </React.$Router.NavLink>
                            </div>
                        </React.$Vant.Form>
                    </div>
                </div>
            </div>
        </>
    )
}

export default Login